<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1.0">
	<title>商品详情 ——学子商城</title>
	<link rel="icon" href="./img/favicon.ico">
	<link rel="stylesheet" href="./css/normalize.css">
	<link rel="stylesheet" href="./css/detail.css">
</head>
<body>
	<!--f1 顶部 -->
	<div class="f1">
		<div class="container flex align-items-center justify-content-between">
			<!-- logo和搜索框 -->
			<div class="flex align-items-center">
				<!-- logo图标 -->
				<div class="logo">
					<a href="./index.html"></a>
				</div>
				<!-- 搜索框 -->
				<div class="search flex align-items-center">
					<input type="text" placeholder="请输入您要搜索的内容">
					<div class="searchicon">
						<a href="products.html"></a>
					</div>
					<div class="text-group flex align-items-center">
						<div>分类搜索</div>
						<div></div>
					</div>
				</div>
			</div>
			<!-- 用户导航栏 -->
			<div class="userNav">
				<ul class="flex align-items-center">
					<li class="flex align-items-center"><a class="heart" href="#"></a></li>
					<li class="flex align-items-center"><a class="list" href="#"></a></li>
					<li class="flex align-items-center"><a class="cart" href="#"></a></li>
					<li class="flex align-items-center"><a href="./register.html">注册</a></li>
					<li><a href="./login.html">登录</a></li>
				</ul>
			</div>
		</div>
	</div>
	<!--f2 导航栏  -->
	<div class="f2">
		<div class="container">
			<ul class="nav flex">
				<li><a href="#">首页</a></li>
				<li><a href="#">学习用品</a></li>
				<li><a href="#">私人订制</a></li>
			</ul>
		</div>
	</div>
	<!-- f3 商品信息 -->
	<div class="f3">
		<div class="container">
			<!-- 面包屑 -->
			<div class="breadclumb">
				<ul class="flex">
					<li><a href="#">首页</a></li>
					<li><a href="#">学习用品</a></li>
					<li><a href="#">笔记本电脑</a></li>
					<li><a href="#">ThinkPadE470 C</a></li>
				</ul>
			</div>
			<!-- 商品的详情 -->
			<div class="product_xinxi flex align-item-start">
				<!-- 商品的图片 -->
				<div class="product_img" id="product_img">
					<!-- 大图 -->
					<div class="img-l">
						<img src="./img/slt1.jpg">
					</div>
					<!-- 小图 -->
					<div class="img-s">
						<div class="img-item flex">
							<img src="./img/slt1.jpg" class="cur" data-slt="slt1" alt="">
							<img src="./img/slt2.jpg" data-slt="slt2"  alt="">
							<img src="./img/slt3.jpg" data-slt="slt3" alt="">
							<img src="./img/slt4.jpg" data-slt="slt4"  alt="">
							<img src="./img/slt5.jpg" data-slt="slt5"  alt="">
						</div>
					</div>
				</div>
				<!-- 商品的选择 -->
				<div class="product_detail">
					<div class="ptitle font-bold">Apple MacBook Air 13.3英寸笔记本 银色(Core i5 处理器/8GB内存/128GB SSD闪存 MMGF2CH/A)</div>
					<div class="secondtitle font-bold">开学季，超值满千减百品牌周</div>
					<!-- 价格签 -->
					<div class="priceTabs user-select-none">
						<div class="row1 flex align-items-end">
							<div class="col1">学员售价：</div>
							<div class="price col2 h3 text-theme-color">￥6988.00</div>
						</div>
						<div class="row2 flex">
							<div class="col1">服务承诺：</div>
							<div class="col2">*30天无忧退货 *48小时快速退款</div>
						</div>
					</div>
					<!-- 联系客服 -->
					<div class="row4 flex pb-5 align-items-center">
						<div class="col1 h4 w-50">客服：</div>
						<div class="col2"><a href="#" class="h5 text-default">联系客服</a></div>
					</div>
					<!-- 规格 -->
					<div class="row5 flex align-item-start pb-10 flex-start">
						<div class="col1 h4 w-50">规格：</div>
						<div class="spec col2 flex flex-wrap user-select-none">
							<!-- 规格项 -->
							<div class="pitem active">【E470C-2017新】i5 4G 500G</div>
							<div class="pitem">【E470C-2017新】i5 8G 500G</div>
							<div class="pitem">【E470C-2017新】i5 8G 1TB</div>
							<div class="pitem">【E470C-2017新】i5 4G 256GSSD</div>
							<div class="pitem">【E470C-2017新】i5 8G 256GSSD</div>
						</div>
					</div>
					<!-- 数量 -->
					<div class="row6 flex">
						<div class="col1 w-50 flex align-items-center">数量：</div>
						<div class="col2">
							<div class="num-group flex align-item-start">
								<div class="jian">-</div>
								<input class="product-Num" type="text" value="1">
								<div class="jia">+</div>
							</div>
						</div>
					</div>
					<!-- 按钮组 -->
					<div class="row7 flex align-items-center user-select-none">
						<div class="col1 buybtn">立即购买</div>
						<div class="col2 cartbtn flex justify-content-center align-items-center">
							<img src="./img/product_detail_img7.png">
							<div>加入购物车</div>
						</div>
						<div class="col3 heartbtn">
							<img src="./img/product_detail_img6.png">
							<div>收藏</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
	<!-- f4 为你推荐 -->
	<div class="f4">
		<div class="container">
			<!-- 标题部分 -->
			<div class="carousel-title flex align-items-end user-select-none">
				<div class="font-bold">为你推荐</div>
				<div class="font-bold">大家都在看</div>
			</div>
			<!-- 轮播广告 -->
			<div class="carousel user-select-none">
				<div class="flex">
					<div class="carousel-item text-center cursor-pointer">
						<img src="./img/product_detail_3.png">
						<div class="font-bold">戴尔(DELL)魔方15MF Pro-R2505TSS灵</div>
					</div>
					<div class="carousel-item text-center cursor-pointer">
						<img src="./img/study_computer_img3.png">
						<div class="font-bold">ThinkPad New S2 (20GUA00QCD)13.3英寸超霸</div>
					</div>
					<div class="carousel-item text-center cursor-pointer">
						<img src="./img/product_detail_4.png">
						<div class="font-bold">联想(Lenovo)YOGA900(YOGA4PRO)多彩版</div>
					</div>
					<div class="carousel-item text-center cursor-pointer">
						<img src="./img/product_detail_2.png">
						<div class="font-bold">戴尔 DELL燃7000 R1605S 超霸</div>
					</div>
					<div class="carousel-item text-center cursor-pointer">
						<img src="./img/product_detail_3.png">
						<div class="font-bold">戴尔(DELL)魔方15MF Pro-R2505TSS灵</div>
					</div>
					<div class="carousel-item text-center cursor-pointer">
						<img src="./img/study_computer_img3.png">
						<div class="font-bold">ThinkPad New S2 (20GUA00QCD)13.3英寸超霸</div>
					</div>
					<div class="carousel-item text-center cursor-pointer">
						<img src="./img/product_detail_4.png">
						<div class="font-bold">联想(Lenovo)YOGA900(YOGA4PRO)多彩版</div>
					</div>
					<div class="carousel-item text-center cursor-pointer">
						<img src="./img/product_detail_2.png">
						<div class="font-bold">戴尔 DELL燃7000 R1605S 超霸</div>
					</div>
				</div>
			</div>
		</div>
	</div>
	<!-- f5 商品详情 -->
	<div class="f5">
		<div class="container">
			<!-- 标题部分 -->
			<div class="laptop-title flex user-select-none">
				<!-- 左侧标题 -->
				<div class="left_title align-item-start flex font-bold">
					<div class="active cursor-pointer">商品详情</div>
					<div class="cursor-pointer">商品评价</div>
				</div>
				<!-- 右侧加入购物车按钮 -->
				<div class="cartadd cursor-pointer flex justify-content-center align-items-center">
					<img src="./img/product_detail_img7.png">
					<div>加入购物车</div>
				</div>
			</div>
			<!-- 内容部分 -->
			<div class="laptop-main flex">
				<!-- 商品详情部分 -->
				<div class="laptop_details user-select-none">
					<!-- 规格参数 -->
					<div class="spec">
						<!-- 标题行 -->
						<div class="row1 flex align-items-center">
							<div class="col1 font-bold">规格参数</div>
							<div class="col2">
								<img src="./img/product_detail_icon_1.png">
							</div>
						</div>
						<!--规格 内容 -->
						<div id="spece" class="row2 flex align-items-center flex-wrap">
							
						</div>
					</div>
					<!-- 商品介绍 -->
					<div class="product-jieshao">
						<!-- 标题部分 -->
						<div class="row1 flex align-items-center">
							<div class="col1 font-bold">商品介绍</div>
							<div class="col2">
								<img src="./img/product_detail_icon_4.png">
							</div>
						</div>
						<!-- 详情部分 -->
						<div class="row2">
							<img class="w-100" src="./img/58119b8aNb84f1e22.jpg">
						</div>
					</div>
					<!-- 底部说明 -->
					<div class="footer-shuoming">
						<!-- 售后保障 -->
						<div class="row1 flex align-items-center">
							<div class="col1 font-bold">售后保障</div>
							<div class="col2">
								<img src="./img/product_detail_icon_3.png">
							</div>
						</div>
						<!-- 正品保障 -->
						<div class="row2">
							<!-- 图标和标题 -->
							<div class="row1 flex align-items-center">
								<div class="col1">
									<img src="./img/product_detail_img16.png">
								</div>
								<div class="col2 font-bold">正品保障</div>
							</div>
							<!-- 内容 -->
							<div class="row2 shuoming">达内学子商城向您保证所售商品均为正品行货，达内自营商品开具机打发票或电子发票。</div>
						</div>
						<!-- 全国联保 -->
						<div class="row2">
							<!-- 图标和标题 -->
							<div class="row1 flex align-items-center">
								<div class="col1">
									<img src="./img/product_detail_img16.png">
								</div>
								<div class="col2 font-bold">全国联保</div>
							</div>
							<!-- 内容 -->
							<div class="row2 shuoming">凭质保证书及达内商城发票，可享受全国联保服务，与您亲临商场选购的商品享受相同的质量保证。达内商城还为您提供具有竞争力的商品价格和运费政策，请您放心购买！ 注：因厂家会在没有任何提前通知的情况下更改产品包装、产地或者一些附件，本司不能确保客户收到的货物与商城图片、产地、附件说明完全一致。只能确保为原厂正货！并且保证与当时市场上同样主流新品一致。若本商城没有及时更新，请大家谅解！</div>
						</div>
						<!-- 包装清单 -->
						<div class="row3">
							<!-- 标题 -->
							<div class="row1 flex align-items-center">
								<div class="col1 font-bold">包装清单</div>
								<div class="col2">
									<img src="./img/product_detail_icon_2.png">
								</div>
							</div>
							<!-- 内容 -->
							<div class="row2 shuoming">笔记本 x1 适配器 x1 电源线 x1 电池 x1 说明书（电子版）x1 备注：笔记本电脑的背面只会标注此电脑的系列，例如： XPS 13-9360 ， 如果您需要核实此电脑的具体配置型号是否与达内页面相符，可电话咨询达内厂商：800-858-2969</div>
						</div>
					</div>
				</div>
				<!-- 悬浮边栏 -->
				<div class="menu user-select-none">
					<div id="aside">
						<!-- 规格参数标签 -->
						<div class="tab cur flex align-items-center cursor-pointer justify-content-center">
							<img class="img-fluid" src="./img/product_detail_icon_1.png">
							<div>规格参数</div>
						</div>
						<!-- 商品介绍标签 -->
						<div class="tab flex align-items-center cursor-pointer justify-content-center">
							<img class="img-fluid" src="./img/product_detail_icon_4.png">
							<div>商品介绍</div>
						</div>
						<!-- 售后保障标签 -->
						<div class="tab flex align-items-center cursor-pointer justify-content-center">
							<img class="img-fluid" src="./img/product_detail_icon_3.png">
							<div>售后保障</div>
						</div>
						<!-- 包装清单标签 -->
						<div class="tab flex align-items-center cursor-pointer justify-content-center">
							<img class="img-fluid" src="./img/product_detail_icon_2.png">
							<div>包装清单</div>
						</div>
						<!-- 回到顶部 -->
						<div class="tab flex align-items-center cursor-pointer justify-content-center">
							<img class="img-fluid" src="./img/product_detail_icon_up_1.png">
							<div>回到顶部</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
	<!-- f6 功能菜单 -->
	<div class="f6">
		<div class="container">
			<ul class="menulist flex">
				<li class="text-center">
					<div class="flex justify-content-center">
						<span class="icon1"></span>
					</div>
					<div>品质保障</div>
				</li>
				<li class="text-center">
					<div class="flex justify-content-center">
						<span class="icon2"></span>
					</div>
					<div>私人订制</div>
				</li>
				<li class="text-center">
					<div class="flex justify-content-center">
						<span class="icon3"></span>
					</div>
					<div>学员特供</div>
				</li>
				<li class="text-center">
					<div class="flex justify-content-center">
						<span class="icon4"></span>
					</div>
					<div>专属特权</div>
				</li>
			</ul>
		</div>
	</div>
	<!-- f7 底部菜单 -->
	<div class="f7">
		<div class="container flex align-item-start">
			<!-- logo -->
			<div class="fleft">
				<!-- logo -->
				<div class="logo">
					<a href="./index.html"></a>
				</div>
				<!-- 底部文字 -->
				<div class="FootFonts"></div>
			</div> 
			<!-- 列表 -->
			<div class="fmiddle">
				<!-- 列表标题 -->
				<div>
					<ul class="flex">
						<li>买家帮助</li>
						<li>商家帮助</li>
						<li>关于我们</li>
					</ul>
				</div>
				<div class="list-main flex">
					<ul>
						<li><a href="#">新手指南</a></li>
						<li><a href="#">服务保障</a></li>
						<li><a href="#">常见问题</a></li>
					</ul>
					<ul>
						<li><a href="#">商家入驻</a></li>
						<li><a href="#">商家后台</a></li>
					</ul>
					<ul>
						<li><a href="#">关于达内</a></li>
						<li><a href="#">联系我们</a></li>
						<li class="flex align-items-center">
							<div class="wechat">
								<a href="#"></a>
							</div>
							<div class="sinablog">
								<a href="#"></a>
							</div>
						</li>
					</ul>
				</div>
			</div>
			<!-- 客户端 -->
			<div class="khd flex">
				<div>
					<div class="khd-text text-center">学子商城客户端</div>
					<div class="android"></div>
					<div class="ios"></div>
				</div>
				<div class="erweima"></div>
			</div>
		</div>
	</div>
	<!-- f8 版权说明 -->
	<div class="f8">
		<div class="container text-center">&copy;2017&nbsp;达内科技有限公司&nbsp;版权所有&nbsp;京ICP备08000853号-75</div>
	</div>
</body>
<script>
		// 商品数据
		window.onload=()=>{
			let ptitle=document.querySelector('.ptitle');
			let price=document.querySelector('.price');
			let xhr=new XMLHttpRequest();
			xhr.open('GET',`/v2/products/detail/1`);
			xhr.onload=()=>{
				let data=JSON.parse(xhr.responseText).data[0];
				const {title,price,lname,os,memory,resolution,video_card,cpu,video_memory,category,disk} = data
				const html = `
						<div class="col"><a href="#">商品名称：${lname}</a></div>
						<div class="col"><a href="#">系统：${os}</a></div>
						<div class="col"><a href="#">内存容量：${memory}</a></div>
						<div class="col"><a href="#">分辨率：${resolution}</a></div>
						<div class="col"><a href="#">显卡型号：${video_card}</a></div>
						<div class="col"><a href="#">处理器：${cpu}</a></div>
						<div class="col"><a href="#">显存容量：${video_memory}</a></div>
						<div class="col"><a href="#">分类：${category}</a></div>
						<div class="col"><a href="#">硬盘容量:${disk}</a></div>
				`
				const spece = document.getElementById('spece')
				spece.innerHTML = html
			}
			xhr.send();
		}
	// 商品切换图片
	const s_imgs = document.querySelectorAll('#product_img>.img-s>div>img')
	const l_img = document.querySelector('#product_img>.img-l>img')
	s_imgs.forEach(value => {
		value.onmouseover = function() {
			const cur = document.querySelector('.img-s .cur')
			cur.classList.remove('cur')
			this.classList.add('cur')
			const index = this.dataset.slt
			l_img.src=`./img/${index}.jpg`
		}
	})
	// 侧边栏切换
	const aside = document.getElementById('aside')
	const tabs = document.querySelectorAll('#aside>.tab')
	tabs.forEach(tab => tab.onclick = click_tab)
	function click_tab() {
		const cur = document.querySelector('#aside>.tab.cur')
		cur.classList.remove('cur')
		this.classList.add('cur')
	}
	// 规格参数
	tabs[0].addEventListener('click',function() {
		document.documentElement.scrollTop = document.body.scrollTop = 1081
	}) 
	// 商品介绍
	tabs[1].addEventListener('click',function() {
		document.documentElement.scrollTop = document.body.scrollTop = 1270
	})
	// 售后保障
	tabs[2].addEventListener('click',function(){
		document.documentElement.scrollTop = document.body.scrollTop = 6670
	})
	// 包装清单
	tabs[3].addEventListener('click',function(){
		document.documentElement.scrollTop = document.body.scrollTop = 6800
	})
	// 悬浮边栏
	window.onscroll = function() {
		let y = document.body.scrollTop
		if( y == 0) {
			y = document.documentElement.scrollTop
		}
		if(y > 1080) {
			aside.style = "opacity:1;position:fixed"
		}else {
			aside.style = ''
		}
	}
	// 返回顶部
	tabs[4].removeEventListener('click',click_tab)
	tabs[4].addEventListener('click',function(){
		document.documentElement.scrollTop = document.body.scrollTop = 0
	})
	let jian=document.querySelector('.jian');
	let jia=document.querySelector('.jia');
	// 商品的数量
	let pnum=document.querySelector('.product-Num');
	jian.onclick=()=>{
		pnum.value--;
		if(pnum.value<1){
			pnum.value=1;
		}
	}
	jia.onclick=()=>{
		if(pnum.value<1){
			pnum.value=1;
		}
		if(pnum.value>100){
			pnum.value=99;
			return;
		}
		if(pnum.value<99){
			pnum.value++;
		}
	}
	// 规格选项 
	const spec = document.querySelector('.spec')
	spec.onclick = function(event) {
		if(event.target.className == 'pitem') {
			const cur = spec.getElementsByClassName('active')[0]
			cur.classList.remove('active')
			event.target.classList.add('active')
		}
	}
</script>
</html>